<template>
  <div class="shoppingTrolley">
    <div class="content">
      <div class="major">
        <table>
          <thead>
            <tr>
              <td>
                <el-checkbox v-model="checkAll" @click="goCheckAll" label="全选" size="large" />
<!--                <input type="checkbox" v-model="checkAll" @click="goCheckAll()"> 全选-->
              </td>
              <td>商品</td>
              <td>单价</td>
              <td>数量</td>
              <td>金额</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody ref="tbody">
            <tr v-for="(item,index) in cartList" :key="index">
              <td>
                <el-checkbox @click="goCheck(item)" v-model="item.checked" size="large" />
<!--                <input type="checkbox" @click="goCheck(item)" v-model="item.checked"> 选中-->
              </td>
              <td>
                <div class="imgbox">
                  <img :src="item.imgsrc" alt="图片走丢了">
                </div>
                <p>{{ item.storeName }}</p>
              </td>
              <td>{{ item.price }}</td>
              <td><el-input-number v-model="item.num" :min="1" :max="10" @change="handleChange" /></td>
              <td style="color: orangered;font-size: 20px">${{item.price * item.num}}</td>
              <td> <el-link type="danger">删除</el-link></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="settlement" ref="drag">
        <div>
          <el-checkbox v-model="checkAll" @click="goCheckAll" label="全选" size="large" />
        </div>
        <div>
          <el-link type="danger">删除</el-link>
        </div>
        <div>已选商品{{ totalnum }}</div>
        <div>
          合计 <span style="color: orangered;font-size: 20px">${{totalprice}}</span>
        </div>
        <div>
          <button>结算</button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {reactive, toRefs, watch, computed, ref, onMounted} from "vue";

export default {
  name: "index",
  setup(){
    let data = reactive({
      //是否全选
      checkAll:false,
      //总合计价格
      totalprice:0,
      //总数量
      totalnum:0,
      handleChange(value){
        console.log(value)
      }
    })

    //购物车数据 此处数据应来自服务器接口
    let cartList = reactive([
      {
        imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/20141006231606_CrJmu.jpeg',
        storeName:'暖暖的 让我再靠近一点',
        price:'10',
        num:1,
        checked:false
      },
      {
        imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/20141006231606_CrJmu.jpeg',
        storeName:'暖暖的 让我再靠近一点',
        price:'12',
        num:1,
        checked:false
      },
      {
        imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/20141006231606_CrJmu.jpeg',
        storeName:'暖暖的 让我再靠近一点',
        price:'20',
        num:1,
        checked:false
      },
      {
        imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/20141006231606_CrJmu.jpeg',
        storeName:'暖暖的 让我再靠近一点',
        price:'30',
        num:1,
        checked:false
      },
      ])

    function goCheck(item){
      //数值是点击之前的值 所以要取反
      //定义一个长度
      let length = 1
      cartList.forEach((i) => {
        if(i.checked){
          length ++
        }
      })

      if (length === cartList.length){
        data.checkAll = true
      }else {
        data.checkAll = false
      }

    }

    function goCheckAll(){
      //数值是点击之前的值 所以要取反
      if(!data.checkAll){
        cartList.forEach((item) => {
          item.checked = true
        })
      }else {
        cartList.forEach((item) => {
          item.checked = false
        })
      }

    }

    //计算属性
    data.totalprice = computed(() => {
      let totalprice = 0

      cartList.forEach((item) => {
        if(item.checked){
          totalprice += parseInt(item.price) * item.num
        }
      })
      return totalprice
    })

    data.totalnum = computed(() => {
      let totalnum = 0

      cartList.forEach((item) => {
        if(item.checked){
          totalnum ++
        }
      })
      return totalnum
    })

    const drag = ref(null)

    const tbody = ref(null)

    let numValue = ref(0)

    onMounted(() => {
      numValue = tbody.value.offsetHeight + tbody.value.offsetTop
      //获取滚动条的高度
      // window.addEventListener('scroll',handleScroll,true)
    })

    /*
    function handleScroll(){
      let top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset)
      if(top < (numValue - 132)){
        drag.value.style = 'position: fixed;\n' +
              '    bottom: 0;\n' +
              '    z-index: 10;\n' +
              '    width: 1250px;'
        }else {
        drag.value.style = ' '
      }
    }*/

    return {
      ...toRefs(data),
      cartList,
      goCheckAll,
      goCheck,
      drag,
      tbody
    }

  },
}
</script>

<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  .shoppingTrolley {
    .content {
      width: 1250px;
      margin: 0 auto;
      min-height: 700px;
      box-sizing: border-box;
      .major {
        border-radius: 10px 10px 0 0;
      }
    }
  }
  table {
    width: 100%;
    box-shadow: rgba(0,0,0,0.2) 0px 4px 8px 0px, rgba(0,0,0,0.2) 0px 6px 20px 0px;
    thead {
      tr {
        background: #ebebeb;
        border-radius: 10px;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        td{
          border-right: 1px solid rosybrown;
          flex: 1;
        }
        td:nth-of-type(2) {
          flex: 3;
        }
      }
    }
    tbody {
      .imgbox {
        width: 80px;
        overflow: hidden;
        img {
          height: 80px;
          width: 100%;
        }
      }
      tr{
        padding: 20px 10px;
        border-bottom: 1px solid rosybrown;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        td{
          flex: 1;
        }
        td:nth-of-type(2) {
          flex: 3;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
        }
        td:last-of-type {
          cursor: pointer;
        }
      }
    }
  }
  .settlement {
    display: flex;
    height: 80px;
    align-items: center;
    border-radius: 0 0 10px 10px;
    border: 1px solid rebeccapurple;
    justify-content: space-around;
    background: #f5f8fa;
    div:last-of-type button{
      border: 0;
      display: inline-block;
      width: 70px;
      height: 40px;
      border-radius: 10px;
      background: antiquewhite;
      color: white;
      font-weight: bolder;
      cursor: pointer;
    }
    div:nth-of-type(2) {
      cursor: pointer;
    }
  }
</style>
